<style>
.info-items {
  margin: 20px;
}

.page-button {
  width: 100%;
  display: flex;
  justify-content: center;
}

.jump-button {
  width: 100px;
  height: 40px;
  border-radius: 8px;
  background-color: aqua;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 20px;
  cursor: pointer;
}
</style>


<template>
  <div>
    <h3>一个简单的vue-cli脚手架的项目展示</h3>
    <div class="info-items">
      <p>1.使用vue-cli 4 </p>
      <p>2.只有简单的常用功能展示 vue-router vuex</p>
      <p>3. 建议先点笔记按钮 </p>
      <p>4. 使用了 ElementUI </p>
    </div>
    <!-- 不同页面跳转 -->
    <div class="page-button">
      <div
        class="jump-button"
        @click="onJumpNote"
      >简单的笔记</div>
      <div
        class="jump-button"
        @click="onJumpInfo"
      >简单的信息</div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    // 跳转信息介绍页面
    onJumpInfo() {
      this.$router.push({
        path: "/infoPage"
      });
    },

    // 跳转笔记页面
    onJumpNote() {
      this.$router.push({
        path: "/showPage"
      });
    }
  }
};
</script>




